<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Web Terminal</title>
    <link rel="stylesheet" href="https://unpkg.com/layui@2.7.6/dist/css/layui.css">
    <style>
        body { padding: 20px; }
        .terminal {
            background: #000; color: #0f0;
            font-family: monospace; font-size: 14px;
            padding: 10px; height: 400px;
            overflow-y: auto; border: 1px solid #333;
            white-space: pre-wrap;
        }
        .input-area {
            display: flex; margin-top: 10px;
        }
        .cmd-input {
            flex: 1; padding: 8px; font-family: monospace;
            background: #333; color: #fff; border: 1px solid #666;
        }
        .send-btn { margin-left: 10px; }
    </style>
</head>
<body>
    <div class="layui-container">
        <h1>Web Terminal</h1>
        <button class="layui-btn" id="openTerminal">Open Terminal</button>
    </div>

    <script src="https://unpkg.com/layui@2.7.6/dist/layui.js"></script>
    <script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
    <script>
        let socket = null;
        let terminalIndex = null;
        let output = '';

        document.getElementById('openTerminal').onclick = function() {
            if (terminalIndex) return;
            
            terminalIndex = layui.layer.open({
                type: 1,
                area: ['700px', '500px'],
                title: 'Terminal',
                content: `
                    <div style="padding: 10px;">
                        <div class="terminal" id="terminal"></div>
                        <div class="input-area">
                            <input type="text" class="cmd-input" id="cmdInput" placeholder="Enter command...">
                            <button class="layui-btn send-btn" onclick="sendCommand()">Send</button>
                        </div>
                    </div>
                `,
                success: function() {
                    connectSocket();
                    document.getElementById('cmdInput').focus();
                    document.getElementById('cmdInput').onkeypress = function(e) {
                        if (e.key === 'Enter') sendCommand();
                    }
                },
                end: function() {
                    terminalIndex = null;
                    if (socket) {
                        socket.disconnect();
                        socket = null;
                    }
                }
            });
        };

        function connectSocket() {
            socket = io();
            
            socket.on('connect', function() {
                console.log('Connected to server');
            });
            
            socket.on('output', function(data) {
                output += data.data;
                document.getElementById('terminal').textContent = output;
                document.getElementById('terminal').scrollTop = 999999;
            });
        }

        function sendCommand() {
            const input = document.getElementById('cmdInput');
            const cmd = input.value.trim();
            if (!cmd) return;
            
            output += '$ ' + cmd + '\n';
            document.getElementById('terminal').textContent = output;
            
            socket.emit('command', {cmd: cmd});
            input.value = '';
        }
    </script>
</body>
</html>